
html {
    font-size: 20px;
}

body {
    font-size: 0.8rem;
    background: var(--weui-BG-0);
}

.weui-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;

    &:before {
        -moz-transform: scaleY(1);
    }
}

.weui-bottom-fixed-opr {
    &:before {
        -moz-transform: scaleY(1);
        border-top: 1px solid var(--weui-BG-0);
        height: 1px;
    }
}

.page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    z-index: 1;
    background: var(--weui-BG-1);
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
}

.weui-captcha {
    position: absolute;
    right: 0;
    padding: 0;
    margin-left: 0;
    height: 1.5rem;
    width: auto;
}

button.weui-vcode-btn, .weui-vcode-btn {
    position: absolute;
    right: 0;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0 0.6rem;
    height: auto;
    width: auto;
    line-height: 2;
    border-radius: 0.3rem;
    color: #06ae56;
    color: var(--weui-BTN-DEFAULT-COLOR);
    background-color: #f2f2f2;
    background-color: var(--weui-BTN-DEFAULT-BG);

    &:before {
        display: none;
    }
}

.weui-form__text-area {
    margin-top: 1rem;
}

.weui-form__control-area {
    margin-top: 1rem;
}

.weui-cell__title {
    padding: 0.8rem;
    font-size: 0.8rem;
    background: var(--weui-BG-1);
}

.weui-check__label {
    font-size: 0.7rem;
}

.weui-cell_locate {

    .weui-cell__bd {
        line-height: 1rem;
        cursor: pointer;
    }

    .weui-cell__ft {
        cursor: pointer;
        padding-left: 0.5rem;

        ion-icon {
            font-size: 1.2rem;
        }
    }
}

.weui-cell_region {

    cursor: pointer;

    .weui-cell__bd {
        line-height: 1rem;
    }

    .weui-cell__ft {

        padding-right: 24px;
        position: relative;

        &:after {
            content:" ";
            width:12px;
            height:24px;
            -webkit-mask-position:0 0;
            mask-position:0 0;
            -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
            -webkit-mask-size:100%;
            mask-size:100%;
            background-color:currentColor;
            color:rgba(0,0,0,.3);
            color:var(--weui-FG-2);
            -webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
            mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
            position:absolute;
            top:50%;
            right:0;
            margin-top:-12px
        }
    }

}

.weui-cell_search-picker {

    cursor: pointer;

}

.weui-label {
    display: flex;
    align-items: center;
}

.weui-cells {

    &:after {
        -moz-transform: scaleY(1);
    }
}

.weui-cell {

    font-size: 0.8rem;
    line-height: 0.8rem;

    &:first-of-type {

        &:before {
            display: none;
        }

    }

    &:before {
        -moz-transform: scaleY(1);
    }

    .weui-cell__hd {

        display: flex;
        align-items: center;
        line-height: 1rem;

        ion-icon {
            display: block;
            font-size: 1rem;
            margin-right: 0.8rem;
        }

    }

    .weui-cell__bd {
        position: relative;
        display: flex;
        align-items: center;

        div.weui-select {
            padding-top: 0.9rem;
            padding-bottom: 0.9rem;
            line-height: 1rem;
            color: var(--weui-FG-1);
        }
    }

    &.weui-block {

        &:before {
            right: 16px;
        }

        display: block;

        .weui-cell__hd {
            margin: 0.5rem 0 1rem 0;

            .weui-label {
                width: 100%;
            }
        }

    }

}

.weui-textarea {
    background: var(--weui-BG-1);
    padding: 0.3rem 0.5rem;
    height: auto;
    min-height: 4rem;
}

// 解决firefox下列显示不正常的情况
.weui-picker__bd {
    overflow: clip;
}

.weui-search {
    position: fixed;
    z-index: 500;
    background: var(--weui-BG-1);
    top: 2.5rem;
    left: 0;
    right: 0;
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;

    .weui-search__container {
        height: 2.2rem;
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.5rem;
        padding: 0.4rem 0.5rem;
        background: var(--weui-BG);
        border-radius: 0.2rem;

        .weui-search__keyword {
            flex: 1;
        }

        .weui-search__btn {
            margin-left: 0.5rem;
            display: flex;
            align-items: center;
            background: var(--weui-BTN-DEFAULT-COLOR);
            border-radius: 0.2rem;
            border: none;
            color: var(--weui-WHITE);
            padding: 0.2rem 0.5rem;
            font-size: 0.8rem;
        }
    }

    .weui-search__filter {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem 0.5rem 0.5rem 0;
        padding: 0.4rem 0.5rem;
        background: var(--weui-BG);
        border-radius: 0.2rem;
        font-size: 1rem;
        height: 2.2rem;
        cursor: pointer;

        &.active {
            color: --var(--weui-RED);
        }
    }
}

.weui-mask {
    cursor: pointer;
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
}

.weui-actionsheet {
    right: 0;
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
}

.weui-half-screen-dialog {
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.8rem;
    height: 90%;
    padding: 0;
    transform: translateY(100%);
    transition: transform 0.5s;
    -moz-transition: transform 0.5s; /* Firefox 4 */
    -webkit-transition: transform 0.5s; /* Safari and Chrome */
    -o-transition: transform 0.5s; /* Opera */

    &.weui-half-screen-dialog_show {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    .weui-half-screen-dialog__hd {
        position: relative;
        padding: 0 1rem;
        height: 3.2rem;

        .weui-half-screen-dialog__close {
            cursor: pointer;
            position: absolute;
            font-size: 1rem;
            display: flex;
            align-items: center;
            background: var(--weui-BG-0);
            border-radius: 0.6rem;
            padding: 0.1rem;
            z-index: 3000;
        }

        .weui-half-screen-dialog__title {
            font-size: 0.8rem;
            text-align: center;
        }
    }

    .weui-half-screen-dialog__bd {
        font-size: 0.8rem;
        padding-bottom: 0.5rem;

        .filter-panel {
            
            padding: 1rem;

            .filter-group-title {
                margin-bottom: 1rem;
            }

            .filter-group {

                display: flex;
                flex-wrap: wrap;
                margin-bottom: 1rem;

                .filter-item {

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 0.8rem;
                    border-radius: 0.9rem;
                    height: 1.8rem;
                    border: 1px solid var(--weui-BG-0);
                    margin-right: 1rem;
                    margin-bottom: 0.5rem;
                    font-size: 0.7rem;

                    &.active {
                        color: var(--weui-RED);
                        border: 1px solid var(--weui-RED);
                        background: rgba(250, 150, 150, 0.2);
                    }

                }

            }
            
        }

    }
}

.weui-check[disabled] + .weui-icon-checked {
    opacity: .5;
}

.weui-file {
    width: 100%;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
    font-size: inherit;
    color: inherit;
    height: 1.4rem;
    line-height: 1.41176471;
}

.weui-gallery {
    z-index: 10050;
}